<template>
  <Transition name="slideup">
    <div v-if="visible" class="my-dialog">213455646321</div>
  </Transition>
</template>

<script setup lang="ts">
const props = defineProps<{
  pos: { top: number; left: number };
}>();

const dialogPos = computed(() => ({
  top: props.pos.top + "px",
  left: props.pos.left + "px",
}));

const visible = ref(false);

onMounted(() => {
  visible.value = true;
});
</script>

<style scoped lang="scss">
.my-dialog {
  position: absolute;
  top: v-bind("dialogPos.top");
  left: v-bind("dialogPos.left");
  width: 200px;
  height: 200px;
  padding: 10px;
  background-color: #fff;
  box-shadow: 0 0 5px rgb(0 0 0 / 50%);
}

.slideup-enter-active,
.slideup-leave-active {
  transition: all 0.5s;
}

.slideup-enter-from,
.slideup-leave-to {
  opacity: 0;
  transform: translateY(30%);
}
</style>
